<template>
  <yu-layout title="百度地图">
    <template #head>
      百度地图的简单使用，最新版GL地图命名空间为BMapGL, 可按住鼠标右键控制地图旋转、修改倾斜角度。
      <el-link
        type="primary"
        href="https://lbsyun.baidu.com/index.php?title=jspopularGL"
        target="_blank"
        :underline="false"
        >点我查看更多</el-link
      >
    </template>
    <template #body>
      <div class="section-container">
        <div id="container" ref="container"></div>
      </div>
    </template>
  </yu-layout>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { baiduMap } from './utils'
import YuLayout from '/@/components/YuLayout'

const container = ref()
const ak = 'ov7zC5g8Ac0ScLPp1zG8TZDuiGfty9Hh' // key

onMounted( () => {
  nextTick( () => {
    baiduMap( ak )
      .then( () => {
        // 创建地图实例
        const map = new BMapGL.Map( container.value )

        // 地图初始化，同时设置地图展示级别
        var point = new BMapGL.Point( 116.404, 39.915 )
        map.centerAndZoom( point, 11 )
        map.enableScrollWheelZoom( true ) // 开启鼠标滚轮缩放
        var scaleCtrl = new BMapGL.ScaleControl( { anchor : BMAP_ANCHOR_TOP_RIGHT, offset : new BMapGL.Size( 150, 5 ) } ) // 添加比例尺控件
        map.addControl( scaleCtrl )
        var zoomCtrl = new BMapGL.ZoomControl( { anchor : BMAP_ANCHOR_TOP_RIGHT, offset : new BMapGL.Size( 50, 5 ) } ) // 添加缩放控件
        map.addControl( zoomCtrl )
        var cityCtrl = new BMapGL.CityListControl() // 添加城市列表控件
        map.addControl( cityCtrl )
        // map.addControl(
        //   // eslint-disable-next-line no-undef
        //   new BMapGL.MapTypeControl({
        //     // eslint-disable-next-line no-undef
        //     /**地图类型为:
        //      1.标准地图：BMAP_NORMAL_MAP
        //      2.地球模式：BMAP_EARTH_MAP
        //      3.普通卫星地图：BMAP_SATELLITE_MAP
        //     */
        //     mapTypes: BMAP_NORMAL_MAP,
        //   })
        // )

        var content = 'label'
        var label = new BMapGL.Label( content, {
          // 创建文本标注
          position : point, // 设置标注的地理位置
          offset : new BMapGL.Size( 10, 20 ) // 设置标注的偏移量
        } )
        label.setStyle( {
          // 设置label的样式
          color : '#000',
          fontSize : '30px',
          border : '2px solid #1E90FF'
        } )
        map.addOverlay( label )
        map.setHeading( 64.5 ) // 设置地图旋转角度
        // map.setTilt(73) //设置地图的倾斜角度
        label.addEventListener( 'click', function() {
          // alert('您点击了标注')
          map.openInfoWindow( infoWindow, map.getCenter() )
        } )
        var opts = {
          width : 250, // 信息窗口宽度
          height : 100, // 信息窗口高度
          title : 'Hello' // 信息窗口标题
        }
        var infoWindow = new BMapGL.InfoWindow( 'World', opts ) // 创建信息窗口对象
        map.setTrafficOn() // 添加交通流量图层
        // 创建地址解析器实例
        var myGeo = new BMapGL.Geocoder()
        // 将地址解析结果显示在地图上，并调整地图视野
        myGeo.getPoint(
          '北京市海淀区上地10街',
          function( point ) {
            if ( point ) {
              map.centerAndZoom( point, 16 )
              const title = new BMapGL.Marker( point, { title : '北京市海淀区上地10街' } )
              map.addOverlay( title )
              title.addEventListener( 'click', function() {
                // alert('您点击了标注')
                map.openInfoWindow( infoWindow, map.getCenter() )
              } )
            } else {
              alert( '您选择的地址没有解析到结果！' )
            }
          },
          '北京市'
        )

        // var geolocation = new BMapGL.Geolocation()
        // geolocation.getCurrentPosition(function (r) {
        //   if (this.getStatus() == BMAP_STATUS_SUCCESS) {
        //     var mk = new BMapGL.Marker(r.point)
        //     map.addOverlay(mk)
        //     map.panTo(r.point)
        //     alert('您的位置：' + r.point.lng + ',' + r.point.lat)
        //   } else {
        //     alert('failed' + this.getStatus())
        //   }
        // })
        // var myCity = new BMapGL.LocalCity()
        // myCity.get(myFun)

        // function myFun(result) {
        //   var cityName = result.name
        //   map.setCenter(cityName)
        //   alert('当前定位城市:' + cityName)
        // }

        map.enableScrollWheelZoom( true )
      } )
      .catch( err => {
        console.log( 'err', err )
      } )
  } )
} )
</script>

<style lang="scss" scoped>
.info {
  height: 30px;
  line-height: 30px;
}
#container {
  width: 100vw;
  height: calc(100vh - 120px);
}
</style>
